<template>
    <div class="mapview-root">
        <div class="chart-container">
            <div class="chart-item">
                <EcharPie :colors="colors" :data-source="pieDataSource" :echar-name="pieEcharName"></EcharPie>
            </div>
            <div class="chart-item">
                <EcharLine :colors="colors" :data-source="lineDataSource" :echar-name="lineEcharName"
                           :x-axis="xAxis"></EcharLine>
            </div>
            <div class="chart-item table-container">
                <table-element :columns="columns" :data-source="tableDataSource"></table-element>
            </div>
        </div>
        <div id="mapContainer"></div>
        <div class="nav">
            <div>
                <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px; float: right">
                    <MenuUnfoldOutlined v-if="collapsed"/>
                    <MenuFoldOutlined v-else/>
                </a-button>
            </div>
            <div class="menu">
                <a-menu
                        v-model:openKeys="openKeys"
                        v-model:selectedKeys="selectedKeys"
                        mode="inline"
                        theme="dark"
                        :inline-collapsed="collapsed"
                >
                    <a-sub-menu  v-for="(item,index) in maptypes" :key="index">
                        <template v-slot:title>
                            <span><MailOutlined/><span>{{item.name}}</span></span>
                        </template>
                        <a-menu-item v-for="item in item.layers" :key="item.id">
                            <a-checkbox
                                    v-model:checked="item.visible"
                                    @change="layerControl(item)"
                            >
                                <span class="layer-check">{{item.title}}</span>
                            </a-checkbox>
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        MenuFoldOutlined,
        MenuUnfoldOutlined,
        PieChartOutlined,
        MailOutlined,
        DesktopOutlined,
        InboxOutlined,
        AppstoreOutlined,
    } from '@ant-design/icons-vue';

    import Map from 'esri/Map'
    import MapImageLayer from 'esri/layers/MapImageLayer'
    import MapView from 'esri/views/MapView'
    import {reactive, toRefs, onMounted, ref, watch} from "vue";
    import EcharPie from '../common/EcharPie'
    import EcharLine from '../common/EcharLine'
    import TableElement from '../common/TableElement';
    import layerDatas from '../../../datas/yellowriver_test.json';

    export default {
        components: {
            MenuFoldOutlined,
            MenuUnfoldOutlined,
            PieChartOutlined,
            MailOutlined,
            DesktopOutlined,
            InboxOutlined,
            AppstoreOutlined,
            EcharPie,
            EcharLine,
            TableElement,
        },
        setup() {

            let mapViewDiv = ref("mapContainer");

            let view = null;

            const layerControl = ({id, visible}) => {
                if (!view || !view.map || !view.map.allLayers.items || view.map.allLayers.items === 0) return
                view.map.findLayerById(id).visible = visible
            };

            const data = reactive({
                collapsed: false,
                selectedKeys: ['1'],
                openKeys: ['0'],
                preOpenKeys: ['0'],
                toggleCollapsed: () => {
                    data.collapsed = !data.collapsed;
                    data.openKeys = data.collapsed ? [] : data.preOpenKeys;
                },
                maptypes: [
                    {name:"研究专题",layers:layerDatas.maptype_public.layers},
                    {name:"NDVI",layers:layerDatas.maptype_NDVI.layers},
                    {name:"土地利用类型",layers:layerDatas.maptype_LandUseType.layers},
                    {name:"盐碱地",layers:layerDatas.maptype_SalineAlkaliLand.layers},
                    {name:"黄河流域",layers:layerDatas.maptype_YellowRiver.layers}
                    ],
                layerControl,
                colors: ['#39ffdc', '#d3ff68', '#89FFCE', '#FF8C68', '#FFDBEF'],
                pieEcharName: '访问来源',
                pieDataSource: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                lineEcharName: '访问来源',
                xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                lineDataSource: [
                    {
                        name: '邮件营销',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ],
                columns: [
                    {
                        key: 'area',
                        name: '区域'
                    },
                    {
                        key: 'air',
                        name: '气温'
                    },
                    {
                        key: 'humidity',
                        name: '湿度'
                    },
                    {
                        key: 'wind',
                        name: '风力'
                    },
                    {
                        key: 'time',
                        name: '时间'
                    },
                ],
                tableDataSource: [
                    {
                        area: '玛曲县',
                        air: '-1',
                        humidity: '78%',
                        wind: '2级',
                        time: '17:00'
                    },
                    {
                        area: '碌曲县',
                        air: '-5',
                        humidity: '76%',
                        wind: '4级',
                        time: '17:00'
                    },
                    {
                        area: '夏河县',
                        air: '-1',
                        humidity: '69%',
                        wind: '3级',
                        time: '17:00'
                    },
                ],
            });

            watch(data.openKeys, (val, oldVal) => {
                data.preOpenKeys = oldVal;
            });

            const {map} = useMap(data.maptypes);
            onMounted(() => {
                view = new MapView({
                    container: mapViewDiv.value,
                    map: map
                });
            });

            const refData = toRefs(data);

            return {
                ...refData,
                mapViewDiv
            };
        }
    }
    const useMap = maptypes => {
        let map = new Map({
            layers: getMapLayers(maptypes)
        });
        return {map}
    };

    const getMapLayers = maptypes => {
        let mapLayers = [];
        maptypes.forEach(maptype => {
            maptype.layers.forEach(
                element=>{
                    let layer = new MapImageLayer({
                id: element.id,
                url: element.url,
                visible: element.visible
   
            })
            layer && mapLayers.push(layer)
                }
            )
        });
        console.log(mapLayers);
        return mapLayers
    };
</script>

<style lang="scss">
    $full: 100%;
    .mapview-root {
        height: $full;
        width: $full;
        display: flex;

        .chart-container {
            height: $full;
            min-width: 400px;
            overflow-y: auto;
            overflow-x: hidden;

            .chart-item {
                margin: {
                    left: 20px;
                    top: 15px;
                    bottom: 15px;
                    right: 5px;
                };
                pointer-events: auto;
                background: rgba(5, 47, 43, .5);
                border: 1px solid #26a38d;
                border-radius: 6px;
                box-shadow: 0 0 10px rgba(12, 133, 112, 1) inset;
                height: 28%;

                &.table-container{
                    height: 30%;
                }
            }
        }

        .nav {
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            position: absolute;
            top: 0;
            right: 0;

            .menu {
                float: left;
                height: calc(100% - 50px);
                background: rgb(0, 21, 41);

                .layer-check {
                    color: white;
                }
            }
        }

        #mapContainer {
            display: flex;
            flex-grow: 1;
            top: 0;
            width: calc(#{$full} - 256px);
            height: $full;
            outline: none;

            .esri-view-root {
                .esri-view-surface {
                    &:focus {
                        outline: none !important;
                    }
                }

                &:focus {
                    outline: none !important;
                }
            }
        }
    }

</style>
